<template>
  <div>
    <div class="left">
      <br>
      <p style="text-align: center;font-weight: 900;font-size: large">热点文章</p>
      <ul>
        <li v-for="(item,index) in article" :key="item.id" @click="details(item.id)">
          <div style="margin-left: 3%;">
            <p style="color: red;font-size: 20px;font-weight: bold;">{{ index+1 }}</p>
          </div>
          <div style="margin-top: -28px;margin-left: 10%;width: 68%;">
            <p>{{ item.title }}</p>
          </div>
          <div style="margin-top: -24px;margin-left: 88%;">
            <p>{{ item.likes }}</p>
          </div>
        </li>
      </ul>
    </div>
    <div class="right">
      <br>
      <p style="text-align: center;font-weight: 900;font-size: large">热点话题</p>
      <ul>
        <li v-for="(item,index) in topic" :key="item.id" @click="details(item.id)">
          <div style="margin-left: 3%;">
            <p style="color: red;font-size: 20px;font-weight: bold;">{{ index+1 }}</p>
          </div>
          <div style="margin-top: -28px;margin-left: 10%;width: 68%;">
            <p>{{ item.title }}</p>
          </div>
          <div style="margin-top: -24px;margin-left: 88%;">
            <p>{{ item.likes }}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import {ref,onMounted} from 'vue'
import axios from '../utils/axios'
import {useRouter} from 'vue-router'
import { ElMessage } from 'element-plus'
let router = useRouter()
let article = ref([])
let topic = ref([])
onMounted(() => {
  getHot()
})
async function getHot(){
  const {data} = await axios.get('contentRetrve')
  article.value = data.data.article
  topic.value = data.data.topic
}
function details(id){
  if(!localStorage.getItem('token')){
    ElMessage({
      message:'请登录！！！',
      type: 'error',
      center: true,
      duration: 1000
    })
    return
  }
  router.push({name:"article",params:{id}})
}
</script>

<style scoped>
.left{
  width: 30%;
  height: 500px;
  margin-left: 15%;
  border: 1px solid black;
  background-color: #e9e9eb;
  border-radius: 10px;
}
.right{
  width: 30%;
  height: 500px;
  margin-left: 55%;
  margin-top: -500px;
  border: 1px solid black;
  background-color: #e9e9eb;
  border-radius: 10px;
}
li{
  margin-top: 10px;
}
li p{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.strong{
  font-weight: 900;
}
</style>